<template>
  <div class="container bgc">
    <div class="w1300">
      <breadcrumb title="订单详情" currentPath="/mall/goods/order-detail" />
      <div class="order-con-wrap">
        <!--订单号及时间-->
        <order-no-date></order-no-date>
        <div class="order-pay-time">
          <h2>
            请在
            <span>20:00:00</span>
            以前付款
          </h2>
          <p>若未及时付款，系统将自动取消订单</p>
        </div>

        <!--订单收货信息-->
        <order-receiving-detail></order-receiving-detail>
        <!--订单信息-->
        <order-table-detail></order-table-detail>
        <order-result-info class="order-result"></order-result-info>

        <div class="btn-result-wrap flex">
          <el-button @click="onCancelOrder">取消订单</el-button>
          <el-button type="primary">确认付款</el-button>
        </div>
        <order-cancel-dialog v-model="isShowCancelDialog"></order-cancel-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import OrderTableDetail from '@/pages/mall/views/order/components/OrderTableDetail.vue'
import OrderResultInfo from '@/pages/mall/views/order/components/OrderResultInfo.vue'
import OrderNoDate from '@/pages/mall/views/order/components/OrderNoDate.vue'
import OrderReceivingDetail from '@/pages/mall/views/order/components/OrderReceivingDetail.vue'
import OrderCancelDialog from '@/pages/mall/views/order/components/OrderCancelDialog.vue'
import { ref } from 'vue'

const isShowCancelDialog = ref(false)
const onCancelOrder = () => {
  isShowCancelDialog.value = true
}
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;
}

.order-con-wrap {
  padding: 43px 32px;
  margin-bottom: 50px;
  background-color: #fff;

  .order-pay-time {
    h2 {
      padding: 22px 0 8px;
      font-size: 24px;
      font-weight: 500 !important;

      span {
        color: $primary;
      }
    }

    p {
      font-size: 16px;
      font-weight: 400;
    }
  }
}

.btn-result-wrap {
  justify-content: flex-end;
}

.order-result {
  border: 0;
}
</style>
